<template>
  <div class="data-container">
    <div class="data-content">
      <div class="data-panel">
        <div class="data-panel-title">UV</div>
        <LineChart ref="LineChart1" :chartData="chartData1"></LineChart>
      </div>
      <div class="data-panel">
        <div class="data-panel-title">PV</div>
        <LineChart ref="LineChart2" :chartData="chartData2"></LineChart>
      </div>
      <div class="data-panel">
        <div class="data-panel-title">IP</div>
        <LineChart ref="LineChart3" :chartData="chartData3"></LineChart>
      </div>
    </div>
  </div>
</template>

<script>
import LineChart from '@/components/ECharts/LineChart.vue'
import { apiMemberCurve } from '@/api/realTime/index'
import { formatFormData } from '@/utils'

export default {
  name: 'panel2',
  props: {
    time: Object,
  },
  components: { LineChart },
  data() {
    return {
      chartData1: {},
      chartData2: {},
      chartData3: {},
    }
  },
  watch: {
    time: {
      handler: function (val) {
        if (val.start_time) {
          this.getData()
        }
      },
    },
  },
  mounted() {},
  methods: {
    // 获取数据
    getData() {
      const info1 = {
        start_time: this.time.start_time,
        end_time: this.time.end_time,
        label1: 'uv',
      }
      apiMemberCurve(formatFormData(info1)).then((res) => {
        const { date, app, pc, m, wx, total } = res.data
        this.chartData1 = {
          x: date,
          series: [
            {
              name: 'APP',
              data: app,
            },
            {
              name: 'PC',
              data: pc,
            },
            {
              name: 'M站',
              data: m,
            },
            {
              name: '小程序',
              data: wx,
            },
            {
              name: '合计',
              data: total,
            },
          ],
        }
      })
      const info2 = {
        start_time: this.time.start_time,
        end_time: this.time.end_time,
        label1: 'pv',
      }
      apiMemberCurve(formatFormData(info2)).then((res) => {
        const { date, app, pc, m, wx, total } = res.data
        this.chartData2 = {
          x: date,
          series: [
            {
              name: 'APP',
              data: app,
            },
            {
              name: 'PC',
              data: pc,
            },
            {
              name: 'M站',
              data: m,
            },
            {
              name: '小程序',
              data: wx,
            },
            {
              name: '合计',
              data: total,
            },
          ],
        }
      })
      const info3 = {
        start_time: this.time.start_time,
        end_time: this.time.end_time,
        label1: 'ip',
      }
      apiMemberCurve(formatFormData(info3)).then((res) => {
        const { date, ip } = res.data
        this.chartData3 = {
          x: date,
          series: [
            {
              name: 'IP',
              data: ip,
            },
          ],
        }
      })
    },
    onResize() {
      this.$refs.LineChart1.onResize()
      this.$refs.LineChart2.onResize()
      this.$refs.LineChart3.onResize()
    },
  },
}
</script>
<style lang="scss" scoped>
$bgColor: #060a22;
$mainColor: #68cee0;
$mainColorOpcity: rgba(104, 206, 224, 0.3);
.data-container {
  width: 100%;
  height: 100%;
  padding: 10px;
  padding-right: 0;
  overflow: hidden;
}
.data-content {
  width: 100%;
  height: 100%;
  padding: 10px;
  padding-right: 20px;
  overflow: auto;
}
.data-panel {
  margin-top: 20px;
  width: 100%;
  .data-panel-title {
    width: 100%;
    font-size: 16px;
    font-weight: bold;
  }
}
::-webkit-scrollbar {
  width: 5px;
  background-color: $mainColorOpcity;
  border-radius: 2px;
}
::-webkit-scrollbar-thumb {
  background-color: $mainColor;
  border-radius: 2px;
}
</style>
